<!DOCTYPE HTML>
<html lang="zh-cn">
    <head>
        <title>新吴社区学习中心 | 用户中心</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-transform">
<link href="/courseware/css/bootstrap.css" rel="stylesheet">
<link href="/courseware/css/main.css" rel="stylesheet" type="text/css">
<link href="/courseware/css/index.css" rel="stylesheet" type="text/css">
<link href="/courseware/css/detail.css" rel="stylesheet" type="text/css">
<link href="/courseware/css/user.css" rel="stylesheet" type="text/css">
<link href="/courseware/css/login.css" rel="stylesheet" type="text/css">
<script>
    var rootUrl = '';
</script>
        <link rel="stylesheet" type="text/css" href="/courseware/css/center.css" />
        <link rel="stylesheet" type="text/css" href="/courseware/css/icono.min.css" />
    </head>
    <body>
    <div class="container">
        <header class="header">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="hidden-xs hidden-sm col-md-3 col-lg-3">
                    <div class="navbar-header navbar-left">
                        <a class="navbar-brand-mc" href="/courseware">
                            <p>新吴社区学习中心</p>
                        </a>
                    </div>
                </div>
                <div class="hidden-xs visible-sm-block col-sm-7">
                    <div class="navbar-header navbar-left">
                        <a class="navbar-brand-mc" href="/courseware">
                            <p style="font-size: 1.2rem;">新吴社区学习中心</p>
                        </a>
                    </div>
                </div>
                <div class="visible-xs-block col-xs-8">
                    <div class="navbar-header navbar-left">
                        <a class="navbar-brand-mc" href="/courseware">
                            <p style="font-size: 1.1rem;">新吴社区学习中心</p>
                        </a>
                    </div>
                </div>
                <div class="hidden-xs hidden-sm col-md-4 col-lg-5">
                    
                </div>
                <div class="hidden-xs col-sm-5 col-md-5 col-lg-4">
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav pull-right">
                            <li id="nav-index" class="active"><a href="/courseware">首页</a></li>
                            <li><a href="/courseware/channels/4.html">课程</a></li>
                            <li class="nav-user"><a href="#"></a></li>
                            <li class="nav-logout"><a class="btn-logout" href="">退出</a></li>
                            <li class="nav-login"><a href="/courseware/login.html">登录</a></li>
                        </ul>
                    </div>
                </div>

                <!--搜索-->
                <div class="visible-xs-block col-xs-2" style="padding-right: 0px;">
                    <div class="nav nav-hamburger pull-right">
                        <a href="search.html"><span class="glyphicon glyphicon-search"></span></a>
                    </div>
                </div>

                <div class="visible-xs-block col-xs-2">
                    <div class="nav nav-hamburger pull-right">
                        <a href="#ham" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="/courseware">首页</a></li>
                            <li><a href="/courseware/channels/5.html">父母课堂</a></li>
                            <li><a href="/courseware/channels/6.html">核心价值观</a></li>
                            <li><a href="/courseware/channels/7.html">老年人</a></li>
                            <li><a href="/courseware/channels/8.html">乐活100</a></li>
                            <li><a href="/courseware/channels/9.html">新市民</a></li>
                            <li class="nav-user"><a href="#"></a></li>
                            <li class="nav-logout"><a class="btn-logout" href="/courseware/profile.html">退出</a></li>
                            <li class="nav-login"><a href="/courseware/login.html">登录</a></li>
                                
                        </ul>
                    </div>

                </div>

            </div>
        </div>
    </nav>
</header>

        <div class="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-push-8 col-lg-push-8 hidden-xs">
                    <!--
                    <script>
                        $(function(){
                            $("#p-basic").addClass("active");
                            $("#p-basic").click(function(){
                                location.href = "/User/basic";
                            });
                            $("#p-avatar").click(function(){
                                location.href = "/User/avatar";
                            });
                            $("#p-account").click(function(){
                                location.href = "/User/account";
                            });
                             $("#p-return").click(function(){
                                location.href = "/User/";
                            });
                        })

                    </script>
                    -->
                    <div class="section">
                        <div class="list-group sidebar-nav">
                            <ul class="menu" id="profile-sidebar">
                                <li id="p-return">返回个人主页<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span></li>
                                <li id="p-basic" class="active">基本资料</li>
                                <li class="hidden-xs" id="p-avatar">修改头像</li>
                                <li id="p-account">修改密码</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-pull-4 col-lg-pull-4">
                    
                    <div class="section section-card section-userinfo">
                        
                            <div id="user_avatar"></div>
                            <div id="user_summary">
                                <span id="username"></span>
                            </div>
                    </div>

                    <div class="section section-card section-settings">
                        <h4>我的学习</h4>
                                                    <div class="form-group">
                                <label for="studiedcoursewares">学习进度</label>
                                <div class="process">
                                <i id="flag" class="icon-flag"></i>
                                <div class="process-static"></div>
                                <div id="process-bar" class="process-active"></div>
                                </div>
                                <div>
                                    <p>已参与学习 <span id="studiedcount" style="color: #f8c038; font-weight: bold;"></span> 门课程 / 共有 
                                    <span id="allcount" style="color: #f8c038; font-weight: bold;"></span> 门课程</p>
                                </div>
                            </div>
                        
                    </div>

                    <div class="section section-card section-settings">
                        <h4>历史记录</h4>
                        <div class="form-group">
                            <ul id="histories">
                            </ul>    
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <footer>
    <div class="container">
        <div class="footer-info">
            <p>Copyright © 无锡市新吴区社区学院 2017-2018</p>
        </div>
    </div>
</footer>
    <div class="bottom-bar">
	<ul>
		<li id="itemHome"><a href="/courseware/">首页</a></li>
		<li id="itemAllCourseware"><a href="/courseware/channels/4.html">全部课程</a></li>
		<li id="itemStudyCharts"><a href="/courseware/index.html#sbStudyCharts">排行榜</a></li>
		<li id="itemLogin" class="hidden"><a href="/courseware/login.html">登录</a></li>
		<li id="itemMyProfile"><a href="/courseware/profile.html">我的</a></li>
	</ul>
</div>
    <script src="/courseware/js/jquery.js"></script>
<script type="text/javascript">
	if(window.__wxjs_environment === 'miniprogram'){
        $('.header').hide();
        $('.home .content, .container .content').css('margin-top', '15px');
    };
</script>
<script src="/courseware/js/html5shiv.js"></script>
<script src="/courseware/js/respond.js"></script>

<script src="/courseware/js/jquery.cookie.js"></script>
<script src="/courseware/js/axios-0.17.1.min.js"></script>
<script src="/courseware/js/bootstrap.js"></script>
<script src="/courseware/js/header.js"></script>
    <script>
        $("#nav-index").removeClass('active');
        $("#nav-course").addClass('active');

        

        function initProcessBar(hasGet, totalGet) {
            var flag = document.getElementById('flag'),
            processBar = document.getElementById('process-bar'),
            widthPercentage = Math.round(hasGet/totalGet*100);
           
            if (widthPercentage >= 100) {
                widthPercentage = 100;
            }
            flag.style.left = (widthPercentage-1) + '%';
            processBar.style.width = widthPercentage + '%';
            if (widthPercentage == 0) {
                processBar.style.borderStyle = 'none';
            }
        }



        $(document).ready(function() {

            var _cookieName = 'xwsqxy_account';
            var _account = JSON.parse($.cookie(_cookieName));
            $("#username").text(_account.userName);
            
            var instance = axios.create({
              headers: {'X-SS-API-KEY': '8a0471e9-c527-4d57-99a1-6daec32bb629'}
            });
            
            
            
                ///eduonline/api/statistic/getcoursewaresofuser?userid=1
                instance.get('/eduonline/api/statistic/getcoursewaresofuser?userid=' + _account.id)
                    .then(function (response) {

                        var studiedcount = response.data.length;
                        var allcount = 440;

                        console.log(studiedcount);

                        initProcessBar(studiedcount, allcount);
                        $("#studiedcount").html(studiedcount);
                        $("#allcount").html(allcount);

                        $(response.data).each(function(index, item){
                            $("#histories").append("<li><div class=\"h_thumbnail\" style=\"background-image: url(\'" + item.ImageUrl.replace(/@/, "/courseware") + "\')\"></div><a href=\"/courseware/contents/" + item.ChannelId + "/" + item.CoursewareId + ".html\">" + item.CoursewareTitle + "</a></li>");
                        })

                        return false;

                    }).catch(function (error){

                        console.log(error);
                        
                    });

        })
    </script>
    </body>
</html>
